<template>
  <div class="arrow-container">
    <div class="arrow"></div>
    <!-- <div class="arrow-3d">
      <div class="arrow-inner"></div>
    </div> -->
  </div>
</template>

<script setup>
  import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
</script>
<style lang="scss" scoped>
  .arrow-container {
    .arrow{
      position: relative;
      display: inline-block;
      padding-right: 24px;
      color: #333;
      cursor: pointer;
    
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 12px;
        height: 2px;
        background-color: currentColor;
        transition: all 0.3s ease;
      }
    
      &::before {
        transform: translateY(-50%) rotate(45deg);
        transform-origin: right center;
      }
    
      &::after {
        transform: translateY(-50%) rotate(-45deg);
        transform-origin: right center;
      }
    
      &:hover {
        color: #409eff;
    
        &::before {
          transform: translateY(-50%) rotate(45deg) translateX(3px);
        }
    
        &::after {
          transform: translateY(-50%) rotate(-45deg) translateX(3px);
        }
      }
    
    }
  }
</style>
